<template>
  <div>
    <!-- 头部组件 -->
    <Topnav titleTExt="我的关注" />
    <!-- 用户信息部分 -->
    <div class="user_item" v-for="(item, index) in follows" :key="item.id">
      <img
        v-if="item.head_img"
        :src="$axios.defaults.baseURL + item.head_img"
        alt
      />
      <img
        v-else
        src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2103755331,3068281572&fm=26&gp=0.jpg"
        alt
      />
      <div class="user_info">
        <h3>{{ item.nickname }}</h3>
        <p>{{ item.create_date.split("T")[0] }}</p>
      </div>
      <div
        class="cancel"
        v-if="item.isFollow"
        @click="unfollow(item.id, index)"
      >
        取消关注
      </div>
      <div class="btnFollow" v-else @click="follow(item.id, index)">关注</div>
    </div>
    <!-- 没有关注的时候显示的页面 -->
    <div class="notfot" v-if="follows === []">
      <img
        src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1523953309,2313276558&fm=26&gp=0.jpg"
        alt
      />
    </div>
  </div>
</template>

<script>
// 导入头部组件
import Topnav from "@/components/Topnav";
export default {
  data() {
    return {
      follows: [],
    };
  },
  components: {
    Topnav,
  },
  mounted() {
    // 请求关注数据
    this.loadPage();
  },
  methods: {
    // 封装请求关注的函数
    loadPage() {
      this.$axios({
        url: "/user_follows",
      }).then((res) => {
        // console.log(res);
        // 获取关注数据的时候, 所有结果数组中的用户,
        // 都是我已经关注的, 但是我希望一旦点击取消
        // 就会在这个用户上添加标记, 方便我的重新关注
        // 这种情况下,获取到的数据本身属性并不满足我们的需求,
        // 就可以在这直接改造
        // 但是请注意,改造必须在赋值之前完成,
        // 因为如果是整体赋值, vue 会响应式更新
        // 但是如果是赋值以后, 再单独修改对象里面的某个数据
        // this.followsList = res.data.data;
        // 1. 用一个映射生成相同的用户列表
        const { data } = res.data;
        // console.log(data);
        const newData = data.map((item) => {
          return {
            ...item,
            isFollow: true,
          };
        });
        this.follows = newData;
        // console.log(newData);
      });
    },

    // 取消关注
    unfollow(id, index) {
      console.log(id, index);
      this.$axios({
        url: "/user_unfollow/" + id,
      }).then((res) => {
        console.log(res);
        const { message } = res.data;
        // 之前是加载关注数据
        // this.loadPage();
        // 现在只需要改造当前的关注列表即可
        this.follows[index].isFollow = false;
        this.$toast.success(message);
      });
    },
    // 关注用户
    follow(id, index) {
      this.$axios({
        url: "/user_follows/" + id,
      }).then((res) => {
        const { message } = res.data;
        this.follows[index].isFollow = true;
        this.$toast.success(message);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.user_item {
  padding: 5.556vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  img {
    width: 40px;
    height: 40px;
  }
  .user_info {
    margin-left: 20 / 360 * 100vw;
    flex: 1;
    h3 {
      font-size: 4.444vw;
      color: #333;
      font-weight: 400;
    }
    p {
      margin-top: 2.002px;
      font-size: 14px;
      color: #999;
    }
  }
  .cancel {
    font-size: 11.999px;
    background-color: rgba(153, 153, 153, 0.2);
    padding: 1.667vw 2.778vw;
    border-radius: 5.556vw;
    color: #666;
  }
}
.notfot {
  padding: 20px;
  img {
    border: 1px solid #ececec;
    width: 100%;
  }
}
.btnFollow {
  font-size: 3.333vw;
  background: red;
  padding: 0 20px;
  height: 7.222vw;
  line-height: 7.222vw;
  border-radius: 4.167vw;
  color: white;
}
</style>
